<template>
  <div class="article_box">
    <p>文章管理</p>
    <div class="null" v-if="$store.state.myArticle.resultSize === 0">
      什么也没有
    </div>
    <ul>
      <li v-for="(items, index) of article.result" :key="items.id">
        <p class="title">{{items.title}}</p>
        <p class="tag">
          <span>{{items.tags}}</span>
          <span class="iconfont">&#xe693;<span>{{items.viewSize}}</span></span>
          <span class="iconfont">&#xe605;<span>{{items.zanSize}}</span></span>
          <span class="iconfont">&#xe616;<span>{{items.comment}}</span></span>
          <span>{{items.createTime}}</span>
        </p>
        <div class="change">
          <span
            :one="items.title"
            :two="items.id"
            class="iconfont"
            title="编辑"
            :id="items.id"
            @click="bianji"
          >
            &#xe612;
          </span>
          <span
            :one="items.title"
            :two="items.id"
            :three="index"
            class="iconfont"
            title="删除"
            :id="items.id"
            @click="drop"
          >
            &#xe623;
          </span>
        </div>
      </li>
    </ul>
    <article-pages/>
  </div>
</template>

<script>
import ArticlePages from './components/pages'
import { getCenterArticle, dropArticle } from 'com/shuju'
import { mapState } from 'vuex'
export default {
  name: 'IndexArticle',
  components: {
    ArticlePages
  },
  computed: {
    ...mapState({
      article: 'myArticle'
    })
  },
  data () {
    return {
    }
  },
  methods: {
    bianji () { // 编辑
      var title = event.target.getAttribute('one')
      var id = event.target.getAttribute('two')
      var sure = confirm('是否编辑标题为：' + title + '  的文章')
      if (sure) {
        console.log('编辑:')
        this.$router.push({
          name: 'WriteArticol',
          params: {
            id
          }
        })
      }
    },
    drop () { // 删除
      console.log(event.target.getAttribute('three'))
      var title = event.target.getAttribute('one')
      var index = event.target.getAttribute('three')
      var id = event.target.getAttribute('two')
      var sure = confirm('是否删除标题为：' + title + '  的文章')
      if (sure) {
        console.log('删除:')
        dropArticle(id, index, this)
      }
    }
  },
  mounted () {
    var data = new FormData()
    data.set('username', this.$route.query.name)
    getCenterArticle(data, this)
  }
}
</script>

<style lang="stylus" scoped>
  .article_box{
    position: relative
    margin-left: 220px
    width: 900px
    content: " "
    background: rgb(255,255,255)
    p{
      font-size: .45rem
      margin: 0
      cursor: default
      padding: .2rem
    }
    .null{
      position: absolute
      width: 100%
      height: 400px
      text-align: center
      line-height: 300px
      font-size: .7rem
      background-color: white
    }
    ul{
      list-style: none
      padding: 0
      margin: 0
      display: flex
      flex-direction: column
      li{
        position: relative
        box-sizing: border-box
        padding-left: .1rem
        border-top: 1px solid rgb(230,230,230)
        width: 100%
        height: 75px
        .title{
          margin: 0
          padding-top: .15rem
          font-size: .37rem
          color: rgb(15,100,213)
        }
        .tag{
          margin: 0
          padding-top: .15rem
          font-size: .28rem
          span + span{
            margin-left: .5rem
            span{
              margin-left: .1rem
            }
          }
        }
        .change{
          position: absolute
          top: .15rem
          right: 0
          width: 200px
          height: 40px
          span{
            cursor: pointer
            display: inline-block
            position: absolute
            right: 50px
          }
          span + span{
            right: 10px
          }
        }
      }
      li:last-child{
        border-bottom: 1px solid rgb(230,230,230)
      }
    }
  }
</style>
